<template>
  <div class="wrap">
    <div class="title">
      <h3>商品标签</h3>
      <el-button type="primary" @click="handelAddGoods">添加商品标签</el-button>
    </div>
    <el-table
      ref="elTable"
      v-loading="loading"
      :data="tableBind"
      height="550"
      @selection-change="selectChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column label="标签名称" prop="name" />
      <el-table-column label="商品数量" prop="goodsCount" />
      <el-table-column label="是否突出标签" prop="prominent">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.prominent ==0" type="warning">非突出标签</el-tag>
          <el-tag v-if="scope.row.prominent ==1" type="danger">突出标签</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="addTime" />
      <el-table-column label="更新时间" prop="updateTime" />
      <el-table-column label="操作" align="right">
        <template slot-scope="scope">
          <el-button v-if="scope.row.goodsCount === 0" type="text" @click="update(scope.row)">编辑</el-button>
          <el-button
            v-if="scope.row.goodsCount === 0"
            type="text"
            class="deleteBtn"
            @click="remove([scope.row.id])"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <div class="footer-left">
        <el-button plain size="small" @click="allSelection">全选</el-button>
        <el-button plain size="small" @click="allRemove">删除</el-button>
      </div>
      <el-pagination
        class="pagination-right"
        :current-page="pages.currentPage"
        :page-sizes="pages.pageSizes"
        :page-size="pages.pageSize"
        :total="pages.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
/** 商品标签 */
import {
  productLabelList,
  productLabelDel
} from './api/CommodityClassification'
export default {
  name: 'ProductLabel',
  data() {
    return {
      tableBind: [],
      loading: false,
      pages: {
        pageSizes: [20, 30, 40, 50],
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      delId: []
    }
  },
  mounted() {
    this.loadding()
  },
  activated() {
    this.loadding()
  },
  methods: {
    loadding() {
      this.loading = true
      productLabelList({
        shopId: localStorage.getItem('shopId'),
        page: this.pages.currentPage,
        limit: this.pages.pageSize
      }).then(inf => {
        this.tableBind = inf.data.data.data
        this.pages.total = inf.data.data.total
        this.loading = false
      })
    },
    // 添加商品标签
    handelAddGoods() {
      this.$router.push({
        name: 'TabManagement',
        params: { type: '2', status: true }
      })
    },
    // 表格单选触发
    selectChange(row) {
      this.delId = []
      row.forEach((item, index) => {
        if (item.goodsCount > 0) {
          this.$refs.elTable.toggleRowSelection(item, false)
          return this.$message.error('该标签已被使用')
        } else {
          this.delId.push(item.id)
        }
      })
      /* this.delId = row.map(element => element.id)*/
    },
    allRemove() {
      if (this.delId.length > 0) {
        this.delRow(this.delId)
      } else {
        this.$message.warning('请先选中数据')
      }
    },
    // 全选
    allSelection() {
      /* this.$refs.elTable.toggleAllSelection()*/
      this.tableBind.forEach(item => {
        if (item.goodsCount === 0) {
          this.$refs.elTable.toggleRowSelection(item)
        }
      })
    },
    // 编辑
    update(row) {
      this.$router.push({
        name: 'TabManagement',
        params: { type: '2', status: false, row: row }
      })
    },
    // 表格删除
    remove(row) {
      this.delRow(row)
    },
    delRow(id) {
      this.$confirm('你确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        productLabelDel(id)
          .then(() => {
            this.$message.success('成功')
            this.loadding()
          })
      })
    },
    // 分页操作
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pages.pageSize = val
      this.loadding()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pages.currentPage = val
      this.loadding()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 50px 100px;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
  ::v-deep .el-button {
    height: 36px;
  }
}
.deleteBtn {
  color: #ff0000;
}
::v-deep .el-table__body .el-table-column--selection .cell {
  padding-left: 10px;
}
.footer {
  display: flex;
  justify-content: space-between;
  margin: 50px 0px 100px 0px;
  .footer-left {
    ::v-deep.el-button {
      width: 100px;
      margin: 0px;
    }
  }
}
</style>
